<template>
	<div>
		<pages-top @tcBtn="tcshow" :km_list="km_list"></pages-top>
		<div class="tc_box" v-show="show" @click="show=false">
			<transition enter-active-class="animated fadeInRight" leave-active-class="animated slideOutRight">
				<project-tc v-if="show" @sxSure="changekm" @sxCancel="changekm_cancel" @click.native="showT"></project-tc>
			</transition>
		</div>
		<zb-list :lists="list" v-if="list.length>0"></zb-list>
		
	</div>
</template>

<script>
	import axios from 'axios'
	import PagesTop from '../common/pagestop.vue'
	import ProjectTc from '../common/project_tc.vue'
	import ZbList from './components/zbList.vue'
	export default {
		name: 'zhibo',
		components: {
			PagesTop,
			ProjectTc,
			ZbList
		},
		data() {
			return {
				show: false,
				error: "",
				getSuc:false,
				list: [],
				km_list:[]
			}
		},
		watch:{
			'$route': 'getData'
		},
		methods: {
			showT(e){
				e.stopPropagation()
			},
			// 弹框的显示和隐藏
			tcshow() {
				// this.show = this.show == false ? this.show = true : this.show = false
				this.show=true
			},
			// 选择科目后的确定按钮
			changekm(km) {
				if (this.$route.query.km != km) {
					this.$router.push({
						path: this.$route.path,
						query: {
							activeproject: this.$route.query.activeproject,
							km: km
						}
					})
				}
				this.show = false
			},
			// 选择科目后的重置按钮
			changekm_cancel() {
				if (this.$route.query.km) {
					this.$router.push({
						path: this.$route.path,
						query: {
							activeproject: this.$route.query.activeproject
						}
					})
				}
				this.show = false
			},
			// 获取直播的相关数据
			getData() {
				axios.get('/api/zhibo.json',{
					params:{
						activeproject:this.$route.query.activeproject,
						km:this.$route.query.km
					}
				}).then(this.getDataSuc)
					.catch(err => {
						console.log(err)
						this.error = err.toString()
					})
				this.getSuc = true
			},
			getDataSuc(res) {
				// console.log(Object.prototype.toString.call(res.data.data))	
				this.list = res.data.data
				this.km_list = res.data.data[0].item
				console.log(this.km_list)
			}
		},
		mounted() {
			this.getData()
		}
	}
</script>

<style>
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .5s;
	}

	.fade-enter,
	.fade-leave-to

	/* .fade-leave-active below version 2.1.8 */
		{
		opacity: 0;
	}
</style>
